<!--流程编辑器 - 表达式 -->
<template>
    <div>
        <div class="v-list">
            <Form label-position="right"
                  :model="formDynamic"
                  ref="formDynamic"
                  :label-width="100">
                <div class="v-list-c" v-for="(item,index) in formDynamic.items" :key="index">

                    <Row v-for="">
                        <Col span="12">
                            <FormItem
                                    :prop="'items.' + index + '.targetColumnName'"
                                    :rules="{required: true, message: '字段名称不能为空', trigger: 'blur'}"
                                    label="字段名称：">
                                <Input
                                        v-model="item.targetColumnName"
                                        placeholder="请输入字段名称"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="6">
                            <FormItem
                                    :prop="'items.' + index + '.decideValue'"
                                    :rules="{required: true, message: '判别基准值不能为空', trigger: 'blur'}"
                                    label="判别基准值：">
                                <Input
                                        v-model="item.decideValue"
                                        placeholder="请输入判别基准值"/>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem
                                    :prop="'items.' + index + '.decideCondition'"
                                    :rules="{required: true, message: '判别条件不能为空', trigger: 'blur'}"
                                    label="判别条件：">
                                <Select
                                        v-model="item.decideCondition">
                                    <Option value=">">&gt;</Option>
                                    <Option value=">=">&ge;</Option>
                                    <Option value="equal">=</Option>
                                    <Option value="!equal">&ne;</Option>
                                    <Option value="<">&lt;</Option>
                                    <Option value="<=">&le;</Option>
                                    <Option value="content">包含</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="10">
                            <FormItem
                                    :prop="'items.' + index + '.logicOperation'"
                                    :rules="{required: true, message: '与下一条件的逻辑运算不能为空', trigger: 'blur'}"
                                    label="与下一条件的逻辑运算：">
                                <Select
                                        v-model="item.logicOperation">
                                    <Option value="||">或</Option>
                                    <Option value="&&">与</Option>
                                    <Option value="">无</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="2">&nbsp;</Col>
                    </Row>
                    <Row>
                        <Col span="22">
                            <FormItem
                                    :prop="'items.' + index + '.desc'"
                                    :rules="{required: true, message: '描述不能为空', trigger: 'blur'}"
                                    label="描述：">
                                <Input
                                        v-model="item.desc"
                                        type="textarea"
                                        :rows="4"
                                        placeholder="请输入描述内容…"/>
                            </FormItem>
                        </Col>
                        <Col span="2">
                            <span
                                    @click="delExpression(index)"
                                    class="del"></span>
                        </Col>
                    </Row>
                </div>
            </Form>
        </div>
        <div style="text-align: center;padding: 8px 0 ;">
            <Button
                    @click="addExpression"
                    type="success">添加条件
            </Button>
        </div>
    </div>
</template>
<script>
  export default {
	name: 'Expression',
	watch: {},
	data() {
	  return {
		formDynamic: {
		  items: [],
		},
	  };
	},
	props: {
	  expressionData: {
		type: String,
		default: function () {
		  return '[]';
		}
	  },
	  expressionReady: {
		type: Object,
		default: function () {
		  return {
			ready: false,
		  }
		}
	  },
	},
	methods: {
	  // addExpression
	  addExpression() {
		this.formDynamic.items.push({
		  "targetColumnName": "", //字段名称
		  "decideCondition": "", //判别条件
		  "decideValue": "", //判别基准值
		  "logicOperation": "", //与下一条件的逻辑运算
		  "desc": "" //描述
		})
	  },
	  // delExpression
	  delExpression(index) {
		this.formDynamic.items.splice(index, 1)
	  },
	  // parase json string from parents by props
	  parseJson(jsonStr) {
		if (jsonStr && typeof jsonStr === 'string') {
		  try {
			let jsonObj = JSON.parse(jsonStr);
			return jsonObj;
		  } catch (e) {
			console.warn('JSON.parse catch error !');
			return [];
		  }
		} else {
		  console.warn('parseJson type is not string !');
		  return [];
		}
	  },
	  formatJson2String() {
		return JSON.stringify(this.formDynamic);
	  },
	  // emit callback function
	  handler() {
	    // console.log(this.formDynamic);
	    // 如果没有表达式数据，还是返回空的字符串给父组件，将前置条件为唯一时，必须要有后置条件的验证交给父组件
	    if(this.formDynamic.items.length === 0 ){
		  this.$emit('expressionFailHandler', this.formatJson2String([]), '前置条件为 「唯一」 时，必须设置后置条件！');
        }
		// validate the express form items
		this.$refs['formDynamic'].validate((valid) => {
		  if (valid) {
			this.$emit('expressionHandler', this.formatJson2String());
		  } else {
			this.$emit('expressionFailHandler',this.formatJson2String([]),'请检查表达式表单数据');
			// express form validate fail
			// this.$Message.error('请检查表达式表单数据！');
		  }
		});
	  }
	},
	created() {
	},
	mounted() {
	  // console.log(this.parseJson(this.expressionData));
	},
	computed: {},
	components: {},
	watch: {
	  expressionReady: function (val, oldVal) {
		if (val.ready) {
		  this.handler();
		}
	  }
	},
  };
</script>
<style lang="scss" scoped>
    .del {
        width: 32px;
        height: 32px;
        background: url(../../../../../static/img/icon_small_del.png) center no-repeat;
        background-image: -webkit-image-set(url(../../../../../static/img/icon_small_del.png) 1x no-repeat, url(../../../../../static/img/icon_small_del@2x.png) 2x no-repeat);
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        margin: 0 auto;
    }

    .v-list-c {
        padding: 10px 0;
        background: rgba(239, 244, 248, 1);
        margin: 10px 0;
    }
</style>
